<script setup lang="ts">
import { FileUpload } from "@/components/common/FileUpload";
import { clearNoNum, clearSuffix } from "@/utils/inupt";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { ref, watch } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    patentName: "",
    patentNumber: "",
    acceptanceDate: "",
    acceptanceFiles: "",
    authorizeDate: "",
    authorizeFiles: "",
    firstInventor: "",
    firstInventorType: "",
    issueDate: "",
    issueFiles: "",
    obtainDate: "",
    obtainDateFiles: "",
    patentType: "",
    rewardLevel: "",
    rewardName: "",
    secondInventor: "",
    secondInventorType: "",
    showTwoInventor: false,
    transformFiles: "",
    obtainReward: null,
    transform: null,
    transformPrice: null,
    userIds: null,
    score: 0,
    patentee: "",
    sendDate: "",
    belongCountry: "",
    patenteeList: []
  }),
  userList: null
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const changeTwoInventor = type => {
  newFormInline.value.showTwoInventor = type == 1 ? true : false;
  newFormInline.value.secondInventor = "";
  newFormInline.value.secondInventorType = "";
};

watch(
  () => newFormInline.value.patenteeList,
  () => {
    let str = "";
    if (newFormInline.value.patenteeList.length > 0) {
      str = newFormInline.value.patenteeList
        .filter(v => v.patentee)
        .map(v => v.patentee)
        .join(",");
    }
    newFormInline.value.patentee = str;
  },
  { deep: true, immediate: true }
);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    :inline="true"
    class="add-form"
    label-width="120px"
  >
    <el-form-item label="专利名称" prop="patentName">
      <el-input v-model="newFormInline.patentName" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="专利号" prop="patentNumber">
      <el-input v-model="newFormInline.patentNumber" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="专利类型" prop="patentType">
      <el-select
        v-model="newFormInline.patentType"
        placeholder="请选择"
        clearable
      >
        <el-option label="发明专利" value="发明专利" />
        <el-option label="实用新型专利" value="实用新型专利" />
        <el-option label="外观专利" value="外观专利" />
      </el-select>
    </el-form-item>
    <el-form-item />
    <el-form-item label="第一发明人类型" prop="firstInventorType">
      <el-select
        v-model="newFormInline.firstInventorType"
        placeholder="请选择"
        clearable
      >
        <el-option label="学生" value="学生" />
        <el-option label="院内老师" value="院内老师" />
        <el-option label="其他人员" value="其他人员" />
      </el-select>
    </el-form-item>
    <el-form-item label="第一发明人" prop="firstInventor">
      <div class="w-full flex items-center">
        <el-input
          v-model="newFormInline.firstInventor"
          placeholder="请输入"
          class="flex-1"
        />
        <div v-show="!newFormInline.showTwoInventor">
          <IconifyIconOffline
            class="cursor-pointer text-lg !w-[35px]"
            :icon="AddFill"
            @click="changeTwoInventor(1)"
          />
        </div>
      </div>
    </el-form-item>
    <template v-if="newFormInline.showTwoInventor">
      <el-form-item label="第二发明人类型" prop="secondInventorType">
        <el-select
          v-model="newFormInline.secondInventorType"
          placeholder="请选择"
          clearable
        >
          <el-option label="学生" value="学生" />
          <el-option label="院内老师" value="院内老师" />
          <el-option label="其他人员" value="其他人员" />
        </el-select>
      </el-form-item>
      <el-form-item label="第二发明人" prop="secondInventor">
        <div class="w-full flex items-center">
          <el-input
            v-model="newFormInline.secondInventor"
            placeholder="请输入"
            class="flex-1"
          />
          <IconifyIconOffline
            class="text-red-500 cursor-pointer text-lg !w-[35px]"
            :icon="Delete"
            @click="changeTwoInventor(2)"
          />
        </div>
      </el-form-item>
    </template>
    <el-form-item
      label="专利所属国家"
      prop="belongCountry"
      class="flex !items-start"
    >
      <el-select
        v-model="newFormInline.belongCountry"
        placeholder="请选择"
        clearable
      >
        <el-option label="发达国家" value="发达国家" />
        <el-option label="中国" value="中国" />
        <el-option label="一般国家" value="一般国家" />
      </el-select>
    </el-form-item>
    <el-form-item label="专利权人" prop="patentee" class="flex-1">
      <div class="w-full">
        <div
          v-for="(item, index) in newFormInline.patenteeList"
          :key="index"
          class="flex items-center"
          :class="
            index == newFormInline.patenteeList.length - 1 ? '' : 'mb-[15px]'
          "
        >
          <el-input
            v-model="item.patentee"
            class="mr-[10px] flex-1"
            clearable
            placeholder="请输入"
          />
          <IconifyIconOffline
            v-if="index != 0"
            class="text-red-500 text-lg cursor-pointer mr-[8px]"
            :icon="Delete"
            @click="newFormInline.patenteeList.splice(index, 1)"
          />
          <IconifyIconOffline
            class="cursor-pointer text-lg"
            :icon="AddFill"
            @click="newFormInline.patenteeList.push({ patentee: '' })"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="受理日期" prop="acceptanceDate">
      <el-date-picker
        v-model="newFormInline.acceptanceDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>

    <el-form-item label="递交日期" prop="sendDate">
      <el-date-picker
        v-model="newFormInline.sendDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>
    <!-- <el-form-item label="受理附件" prop="acceptanceFiles">
      <FileUpload v-model="newFormInline.acceptanceFiles" :limit="15" />
    </el-form-item> -->
    <el-form-item label="授权日期" prop="authorizeDate">
      <el-date-picker
        v-model="newFormInline.authorizeDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>

    <el-form-item label="授权附件" prop="authorizeFiles">
      <FileUpload v-model="newFormInline.authorizeFiles" :limit="15" />
    </el-form-item>
    <!-- <el-form-item label="下达日期" prop="issueDate">
      <el-date-picker
        v-model="newFormInline.issueDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>
    <el-form-item label="下达附件" prop="issueFiles">
      <FileUpload v-model="newFormInline.issueFiles" :limit="15" />
    </el-form-item> -->

    <!-- 是否获奖 1获奖 0未获奖 -->
    <!-- <el-form-item label="是否获奖" prop="obtainReward">
      <el-radio-group v-model="newFormInline.obtainReward">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="奖项名称" prop="rewardName">
      <el-input v-model="newFormInline.rewardName" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="奖项级别" prop="rewardLevel">
      <el-input v-model="newFormInline.rewardLevel" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="获奖日期" prop="obtainDate">
      <el-date-picker
        v-model="newFormInline.obtainDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-full"
      />
    </el-form-item>
    <el-form-item label="获奖附件" prop="obtainDateFiles">
      <FileUpload v-model="newFormInline.obtainDateFiles" :limit="15" />
    </el-form-item>

    <!-- 是否转化 1是 0否 -->
    <!-- <el-form-item label="是否转化" prop="transform">
      <el-radio-group v-model="newFormInline.transform">
        <el-radio :value="1">是</el-radio>
        <el-radio :value="0">否</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="转化金额" prop="transformPrice">
      <el-input
        v-model="newFormInline.transformPrice"
        placeholder="请输入"
        class="!w-full"
        @input="newFormInline.transformPrice = clearNoNum($event)"
        @blur="
          newFormInline.transformPrice = Number(
            clearSuffix(newFormInline.transformPrice)
          )
        "
      >
        <template #suffix> 万元 </template>
      </el-input>
    </el-form-item>
    <el-form-item label="转化附件" prop="transformFiles">
      <FileUpload v-model="newFormInline.transformFiles" :limit="15" />
    </el-form-item>
    <el-form-item label="关联人员" prop="userIds">
      <el-select
        v-model="newFormInline.userIds"
        clearable
        multiple
        placeholder="请选择"
        class="!w-full"
      >
        <el-option
          v-for="item in props.userList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="获取积分" prop="score">
      <el-input-number
        v-model="newFormInline.score"
        :min="0"
        placeholder="请输入"
        class="!w-[200px]"
      />
    </el-form-item>
    <el-form-item />
  </el-form>
</template>
<style lang="scss" scoped>
.add-form {
  text-align: center;
  .el-form-item {
    width: 42%;
  }
}
</style>
